<template>
    <div>
        <Top :title="title"></Top>
        <div class="content">
            <div class="category">
                <router-link :to="{name:'now'}" class="txt now" href="javascript:(0)"><div class="com active">正在热映</div></router-link>
                <router-link :to="{name:'soon'}" class="txt soon" href="javascript:(0)"><div class="com">即将上映</div></router-link>
            </div>
            <router-view></router-view>
            
        </div>
    </div>
</template>

<script>
    import Top from '../Top.vue';
    import Now from './Now.vue';
    import $ from 'jquery';
    export default{
        data:function(){
           return{
                title:'卖座电影'
           }
        },
        methods:{
            change:function(){
                var title=(this.$route.path).split('m/');
                var current=$('.category').find('.txt');
                current.each(function(index,ele){
                    var txt=$(ele).attr('class');
                    if(txt.search(title[1])!=-1){
                        $(this).find('.com').addClass('active').parent().siblings().find('.com').removeClass('active');
                    }
                })
            }
        },
        watch:{
            '$route':'change'
        },
        components:{
            Top,
            Now
        },
        mounted:function(){
            this.change();
        }
    }
</script>

<style scoped>
    .content{
        padding:0 0.15rem;
        background-color: #f9f9f9;
        width: 100%;
        position: absolute;
        top:0.5rem;
        min-height: 100%;
        box-sizing:border-box;
    }
    .content .category{
        height: 0.46rem;
        margin: 0 auto;
        border-bottom: solid #fe6e00 1px;
        display:flex;
    }
    .category .txt{
        flex:1;
        color: #6a6a6a;
    }
    .category .txt .com{
        text-align: center;
        font-size: 0.16rem;
        line-height: 0.45rem;
    }
    .category .txt .active{  
         color: #fe6e00;   
        border-bottom:0.03rem solid #fe6e00;
        line-height: 0.43rem;
    }
    ul,li{
        list-style:none;
    }
    .film li>a{
        display:block;
        width: 100%;
        padding: 0.2rem 0;
        border-bottom: dashed 1px #c9c9c9;
        overflow: hidden;
    }
    .film li>a .img{
        width: 0.6rem;
        float: left;
    }
    .film li>a .img img{
        width:100%;
    }
    .film li>a .introduction{
        float:left;
        padding-left: 0.15rem;
        width: 75%;
    }
    .film li>a .introduction .filmname{
        font-size: 0.16rem;
        line-height: 0.32rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .introduction .filmname .title{
        float:left;
    }
    .introduction .filmname .go{
        float:right;
        font-family:cursive;
        font-size:0.14rem;
        color:#c6c6c6;
    }
    .introduction .filmname .go .fen{        
        font-size:0.16rem;
        color: #fc7103;
    }
    .introduction p{
        height: 0.24rem;
        line-height: 0.24rem;
        color: #8e8e8e;
        font-size: 0.12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
    .introduction div.num{
        line-height: 0.24rem;
        color: #8e8e8e;
        font-size: 0.12rem;
    }
    .introduction div.num .shu{
        color: #8aa2bf;
    }
</style>